<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <input type="text" v-model="msg">
        <button @click="btn">更改obj中的值</button>
        <input type="text" v-model="info">
    </div>
    <script>

        const vm = new Vue({
            el:'.box',
            data:{
                msg:'yangyang',
                obj:{
                    name:'hanhan',
                    msg:'哪里去了？？'
                },
                info:'涵涵高高兴兴的去找班主任。。。'
            },
            methods: {
                // 更改obj中的属性值 msg:'回宿舍了'
                // 当是对象时更改对象的属性值 watch不能监听到obj变化
                btn(){
                    this.obj.msg = '回宿舍了！！';
                    console.log(this.obj);
                }
                /* btn(){
                    this.obj = {
                        name:'yangyang',
                        msg:'我们心目中的阳光男孩！！'
                    }
                    console.log(this.obj);
                } */
            },
            // 监视器 监听器 侦听器
            watch:{
                // 普通监听只能监听到栈内存的值，只要栈内存的值发生变化就可以监听到
                /* msg(value){
                    // value就是最新的状态值
                    console.log(value);
                }, */
                msg:{
                    handler(value){
                        console.log(value);
                    }
                },
                /* obj(value){
                    console.log(value);
                }, */
                // 要监听到对象的属性值的变化 开启深度监视  deep:true
                obj:{
                    handler(value){
                        console.log(value)
                    },
                    deep:true,
                    immediate:true//立即触发
                }

            }
        })
        console.log(vm);
        // $watch vue实例上的侦听器
        vm.$watch('info',(value)=>{console.log(value)});
        // vm.$watch('obj1',(value)=>{console.log(value)},{})

        /* 
        var  const let
        var 声明变量

        const  声明常量  不变化
        let   声明变量  可变化

        const obj = {
            name:'jack',
            age:10
        }
        obj.name = 'tom'


        
        */
        /* const obj = {
            name:'jack',
            age:10
        }
        obj.name = 'tom';
        console.log(obj); */
       /*  obj = {
            name:'liming'
        } */
        var obj = {
            name:'hanhan'
        }
        var obj1 = obj;
        console.log(obj1);
        obj.height = 185;
        console.log(obj1);
    </script>
</body>
</html>